<script setup>
import { ref } from "vue";
import {useStore} from 'vuex'
import MarkManagement from "@/components/MarkManagement.vue";
import MarkRunResult from "@/components/MarkRunResult.vue";

const store = useStore();
const selected_project_file = ref('')
const result_object = ref('');
const toolTip_ref = ref();
let options = ref([
  {
    value: 'Option1',
    label: 'Option11',
  },
  {
    value: 'Option2',
    label: 'Option21',
  },
  {
    value: 'Option3',
    label: 'Option31',
  },
  {
    value: 'Option4',
    label: 'Option41',
  },
  {
    value: 'Option5',
    label: 'Option51',
  },
]);

window.vscode.postMessage({
  type: "init_build_options"
})
window.addEventListener("message", e => {
  if (e.data["type"] == "init_build_options") {
    options.value = (e.data["data"]);
  }
});

const selectedName = ref('switch1')
const changeSwitch = (name)=>{
  selectedName.value = name;
}

const delete_mark_clicked = ()=>{
  window.vscode.postMessage({
    type:"delete_all_marks"
  })
}
const build_project_clicked = ()=>{
  window.vscode.postMessage({
    type:"build_parameters",
    data:{
      script:selected_project_file.value,
      parameters:JSON.stringify(store.state.config),
    }
  })
}
const back_clicked = ()=>{
  result_object.value.show_details = false;
  toolTip_ref.value.hide();
}
</script>

<template>
  <div class="mainLayout">
    <span class="build_title">编译工程</span>
    <div class="build_project_layout">
      <el-select v-model="selected_project_file" class="select_project_file" placeholder="选择工程文件" popper-class="popper_section">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button type="primary" class="commit_select_btn" v-on:click="build_project_clicked">
        <svg class="start_build_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><g><g><rect x="0" y="0" width="32" height="32" rx="4" fill="#1477FC" fill-opacity="1"/></g><g><path d="M11.000000000000016,9.86852L11.000000000000016,22.131500000000003C11.000000000000016,22.9302,11.890145,23.406599999999997,12.5547,22.9635L21.7519,16.832050000000002C22.3457,16.436230000000002,22.3457,15.56377,21.7519,15.167950000000001L12.5547,9.03647C11.890145,8.59343,11.000000000000016,9.06982,11.000000000000016,9.86852" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
      </el-button>
    </div>
    <div class="management_layout">
      <span class="management_title">插桩管理</span>
      <div>
        <el-tooltip class="item" effect="dark" content="删除全部插桩" placement="top">
          <svg v-on:click="delete_mark_clicked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="15" height="15" viewBox="0 0 15 15"><g><g><path d="M12.5,2.999999999998566L11.99059,12.51327C11.9042,13.6362,11.03767,14.5,9.997489999999999,14.5L5.02682,14.5C3.98664,14.5,3.120108,13.6362,3.033726,12.51327L2.499999999999981,2.999999999998566L12.5,2.999999999998566Z" fill-rule="evenodd" fill="#E6E6E6" fill-opacity="0.20000000298023224"/><path d="M13.0275,2.5L2.5,2.5L1.971162,2.5L2.5351985,12.55161Q2.614206,13.5787,3.31961,14.2819Q4.04005,15,5.02682,15L9.997489999999999,15Q10.98427,15,11.7047,14.2819Q12.4101,13.5787,12.48911,12.55161L12.48956,12.54581L13.0275,2.5ZM3.028832,3.5L3.53225,12.47492Q3.58282,13.1323,4.02559,13.5736Q4.45332,14,5.02682,14L9.997489999999999,14Q10.57099,14,10.99872,13.5736Q11.43964,13.1341,11.49163,12.4804L11.97251,3.5L3.028832,3.5Z" fill-rule="evenodd" fill="#8E8E8E" fill-opacity="1"/></g><g><path d="M0.5,2.5L14.5,2.5Q14.5492,2.5,14.5975,2.50960736Q14.6458,2.5192147,14.6913,2.5380602Q14.7368,2.5569057,14.7778,2.5842652Q14.8187,2.611625,14.8536,2.646447Q14.8884,2.681269,14.9157,2.722215Q14.9431,2.763161,14.9619,2.808658Q14.9808,2.854155,14.9904,2.902455Q15,2.950754,15,3Q15,3.049246,14.9904,3.097545Q14.9808,3.145845,14.9619,3.191342Q14.9431,3.236839,14.9157,3.2777849999999997Q14.8884,3.318731,14.8536,3.353553Q14.8187,3.388375,14.7778,3.4157349999999997Q14.7368,3.443094,14.6913,3.4619400000000002Q14.6458,3.480785,14.5975,3.490393Q14.5492,3.5,14.5,3.5L0.5,3.5Q0.4507543,3.5,0.4024549,3.490393Q0.354155,3.480785,0.308658,3.4619400000000002Q0.263161,3.443094,0.222215,3.4157349999999997Q0.181269,3.388375,0.146447,3.353553Q0.11162499999999997,3.318731,0.08426499999999998,3.2777849999999997Q0.05690600000000001,3.236839,0.03805999999999998,3.191342Q0.019214999999999982,3.145845,0.009606999999999977,3.097545Q0,3.049246,0,3Q0,2.950754,0.009606999999999977,2.902455Q0.019214999999999982,2.854155,0.03805999999999998,2.808658Q0.05690600000000001,2.763161,0.08426499999999998,2.722215Q0.11162499999999997,2.681269,0.146447,2.646447Q0.181269,2.611625,0.222215,2.5842652Q0.263161,2.5569057,0.308658,2.5380602Q0.354155,2.5192147,0.4024549,2.50960736Q0.4507543,2.5,0.5,2.5Z" fill-rule="evenodd" fill="#8E8E8E" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,6.513802528381348)"><path d="M5.221198,4.982451264190674L4.996084,3.194443064190674L4.003916,3.319359464190674L4.22153,5.047781264190673Q4.233262,5.647191264190674,4.660538,6.074461264190674Q5.099878,6.513801264190674,5.7212,6.513801264190674L9.24502,6.513801264190674Q9.866340000000001,6.513801264190674,10.305679999999999,6.074461264190674Q10.73113,5.649021264190674,10.74458,5.052921264190674L10.99482,3.328712964190674L10.00518,3.185089564190674L9.74502,4.977711264190674L9.74502,5.013801264190674Q9.74502,5.220911264190674,9.59858,5.367351264190674Q9.45213,5.513801264190674,9.24502,5.513801264190674L5.7212,5.513801264190674Q5.5140899999999995,5.513801264190674,5.3676449999999996,5.367351264190674Q5.221198,5.220911264190674,5.221198,5.013801264190674L5.221198,4.982451264190674Z" fill-rule="evenodd" fill="#8E8E8E" fill-opacity="1"/></g></g></svg>
        </el-tooltip>
        <el-tooltip ref="toolTip_ref" class="item" effect="dark" content="返回" placement="top">
          <svg v-if="result_object?.show_details" style="margin-left: 10px;" v-on:click="back_clicked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="15" height="15" viewBox="0 0 15 15"><g><g><path d="M10.00293,14.7756L3.50293,14.7756C3.2267900000000003,14.7756,3.00293,14.5518,3.00293,14.2756C3.00293,13.9995,3.2267900000000003,13.7756,3.50293,13.7756L10.00293,13.7756C12.2121,13.7756,14.0029,11.18765,14.0029,8.97852C14.0029,6.76938,12.2122,4.47572,10.00304,4.47572L6.00304,4.47572L6.00304,6.07572C5.991709999999999,6.30287,5.79927,6.47834,5.572039999999999,6.46872C5.48248,6.46912,5.3948,6.44303,5.3200400000000005,6.39372L2.180041,4.30272C1.988179,4.1867,1.9412959,3.92885,2.0800411,3.75272C2.108547,3.7186,2.142303,3.68923,2.180041,3.66572L5.3200400000000005,1.5757198C5.51305,1.447842,5.77131,1.4852893,5.92004,1.66272C5.9734,1.728299,6.00269,1.810175,6.00304,1.89472L6.00304,3.47572L10.00304,3.47572C13.0029,3.47583,14.7248,5.92007,14.9829,8.47583C15.2411,11.03159,13.5029,14.7756,10.00293,14.7756Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
        </el-tooltip>
      </div>
    </div>
    <div class="mark_management_layout">
      <div class="switch_button">
        <div :class="['switch1',{selected:selectedName == 'switch1'}]" v-on:click="changeSwitch('switch1')">插桩配置</div>
        <div :class="['switch2',{selected:selectedName == 'switch2'}]" v-on:click="changeSwitch('switch2')">运行结果</div>
      </div>
    </div>
    <router-view style="color:white" v-slot="{Component}">
      <transition name="fade" mode="out-in">
        <component :is="Component"></component>
      </transition>
    </router-view>
    <div class="sub_layout">
      <transition name="fade">
        <MarkManagement style="padding-left: 14px; padding-right: 14px; color:var(--title-color)" v-show="selectedName === 'switch1'"></MarkManagement>
      </transition>
      <transition name="fade">
        <MarkRunResult ref="result_object" style="padding-left: 14px; padding-right: 14px; color:var(--title-color)" v-show="selectedName === 'switch2'"></MarkRunResult>
      </transition> 
    </div>
  </div>
</template>

<style scoped>
.fade-enter-from,.fade-leave-to{
  opacity: 0;
}
.fade-enter-to,.fade-leave-from{
  opacity: 1;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.mainLayout {
  width: 100%;
  height:100vh;
  /* height: 100%; */
  background-color: var(--background-color);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
}
.build_title {
  padding-left: 14px;
  padding-right: 14px;
  width: 100%;
  height: 14px;
  opacity: 1;

  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: var(--title-color);
}
.management_title{
  padding-left: 14px;
  padding-right: 14px;
  height: 14px;
  opacity: 1;

  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: var(--title-color);
}
.build_project_layout {
  padding-left: 14px;
  padding-right: 14px;
  width: 100%;
  padding-top: 14px;
  display: flex;
  flex-direction: row;
}
.select_project_file{
  flex-grow: 1;
  padding-right: 8px;
}
.select_project_file :deep(.el-input__wrapper) {
  background-color: var(--selector-background-color) !important;
  box-shadow: 0 0 0 1px var(--selector-border-color) inset !important
}

.select_project_file :deep(.el-input .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--selector-boder-focus-color) inset !important;
}

.select_project_file :deep(.el-input__inner) {
  color: var(--selector-color);
}

.commit_select_btn {
  width: 32px;
  height: 32px;
  border: none;
  opacity: 1;
}
.mark_management_layout {
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 14px;
}

.switch_button{
  border: 1px var(--switch-button-border-color) solid;
  border-radius: 4px;
  height:32px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4px;
  margin: 0px;
}
.switch1{
  flex-grow: 1;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: var(--switch-button-color);
  height: 24px;
  line-height: 24px;
}

.switch2{
  flex-grow: 1;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: var(--switch-button-color);
  height: 24px;
  line-height: 24px;
}
.selected{
  background-color: var(--switch-selected-color);
  border-radius: 4px;
  transition: background-color 0.5s;
}
.management_layout{
  display: flex;
  justify-content: space-between;
  padding-right: 24px;
  padding-top:24px;
}
.sub_layout {
  flex-grow: 1;
  overflow: scroll;
}
</style>
